import './log.less'
import React, { useState, Fragment } from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message, Space } from 'antd';
import axios from '../axios'
export default function Login(props) {
    const [messageApi, contextHolder] = message.useMessage();
    const success = () => {
        messageApi.open({
            type: 'success',
            content: '登陆成功',
        });
    };
    const error = () => {
        messageApi.open({
            type: 'error',
            content: '用户名或密码错误',
        });
    };
    // 防抖
    function deounce(fun, time) {
        let timer;
        return function (e) {
            if (timer) { clearTimeout(timer) };
            timer = setTimeout(() => {
                fun.apply(this, [e])
            }, time);
        }
    }
    // 登陆事件
    const onFinish = async (values) => {
        let res = await axios.post('/api/bjl/login', values)
        if (res.data.token) {
            localStorage.setItem('token', res.data.token)
            props.history.push('/')
            success()
        } else {
            error()
        }
    };

    // 渲染
    return (
        <Fragment>
            {contextHolder}
            <div className="logbox">
                <div className="logform">
                    <div className="leftimg">
                        <img src='https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/banner.png' alt="" />
                    </div>
                    <div className="rightform">
                        <div className="rbox">
                            <img src="https://erpdemo.fanpusoft.com/Images/Logo/637520963340736067_637518569831196922_logo.png" alt="" />
                            <div >
                                <Form
                                    autoComplete='off'
                                    name="normal_login"
                                    className="login-form"
                                    initialValues={{
                                        remember: true,
                                    }}
                                    onFinish={deounce(onFinish, 200)}
                                >
                                    <Form.Item
                                        name="username"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入账号!',
                                            },
                                        ]}
                                    >
                                        <Input className='inp' prefix={<UserOutlined className="site-form-item-icon" />} style={{ placeholder: '#fff' }} placeholder="账号" />
                                    </Form.Item>
                                    <Form.Item
                                        name="password"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入密码!',
                                            },
                                        ]}
                                    >
                                        <Input.Password
                                            className='inp'
                                            placeholder="密码"
                                            prefix={<LockOutlined className="site-form-item-icon" />}
                                        />
                                    </Form.Item>
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit" className="login-form-button">
                                            立即登录
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </div>
                            <div className="logbtn"></div>
                            <div className="tips">警告：本软件受中国专利法与国际公约保护，未经授权擅自复制全部或部分内容，将接受法律的严厉惩罚！V.20221024</div>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    )
}
